<template>
  <div class="shopcart">
    <div class="content">
      <div class="left" @click="showShopcartList">
        <div class="logo-wapper">
          <div class="logo" :class="{'highlight':totalCount}">
            <i class="icon-shopping_cart"></i>
          </div>
          <div class="count" v-show="totalCount">
            {{totalCount}}
          </div>
        </div>
        <div class="price border-right" :class="{'highlight':totalPrice}">￥{{totalPrice}}</div>
        <div class="desc">另需要配送费￥{{deliveryPrice}}元</div>
      </div>
      <div class="right">
        <div class="pay" :class="payClass" @click="pay">
          {{payDesc}}
        </div>
      </div>
    </div>
    <div class="ball-container">
      <transition-group name="drop" @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
        <div class="ball" v-for="(ball,index) of balls" :key="index" v-show="ball.show">
          <div class="inner hook"></div>
        </div>
      </transition-group>
    </div>
    <transition enter-active-class="animated slideInUp" leave-active-class="animated slideOutDown">
      <shopcart-list @add="controlAdd" @listhide="listHide" v-show="listShow" :listShow="listShow" :selectFoods="selectFoods"></shopcart-list>
    </transition>
    <transition :duration="800" enter-active-class="animated fadeIn" leave-active-class="animated fadeOut">
      <div class="shadow" v-show="listShow" @click="listHide"></div>
    </transition>
  </div>
</template>
<script>
import ShopcartList from './components/ShopcartList'
export default {
  name: 'ShopCart',
  components: {
    ShopcartList
  },
  props: {
    deliveryPrice: {
      type: Number,
      default: 0
    },
    minPrice: {
      type: Number,
      default: 0
    },
    selectFoods: {
      type: Array,
      default () {
        return []
      }
    }
  },
  data () {
    return {
      balls: [
        {
          show: false
        },
        {
          show: false
        },
        {
          show: false
        },
        {
          show: false
        },
        {
          show: false
        },
        {
          show: false
        },
        {
          show: false
        },
        {
          show: false
        },
        {
          show: false
        },
        {
          show: false
        }
      ],
      dropBalls: [],
      listShow: false
    }
  },
  computed: {
    totalPrice () {
      let total = 0
      this.selectFoods.forEach((food) => {
        total += food.price * food.count
      })
      return total
    },
    totalCount () {
      let count = 0
      this.selectFoods.forEach((food) => {
        count += food.count
      })
      return count
    },
    payDesc () {
      if (this.totalPrice === 0) {
        return `￥${this.minPrice}元起送`
      } else if (this.totalPrice < this.minPrice) {
        let diff = this.minPrice - this.totalPrice
        return `还差${diff}元起送`
      } else {
        return '去结算'
      }
    },
    payClass () {
      if (this.totalPrice >= this.minPrice) {
        return 'payenough'
      }
    }
  },
  methods: {
    drop (el) {
      for (let i = 0; i < this.balls.length; i++) {
        let ball = this.balls[i]
        if (!ball.show) {
          ball.show = true
          ball.el = el
          this.dropBalls.push(ball)
          return
        }
      }
    },
    pay () {
      if (this.totalPrice > this.minPrice) {
        alert(`需要支付${this.totalPrice}元`)
      }
    },
    showShopcartList () {
      if (this.selectFoods.length) {
        this.listShow = !this.listShow
        this.$emit('hideDetail')
      }
    },
    listHide () {
      this.listShow = false
    },
    controlAdd () {
      this.$emit('add', event.target)
    },
    beforeEnter (el) {
      let count = this.balls.length
      while (count--) {
        let ball = this.balls[count]
        if (ball.show) {
          let rect = ball.el.getBoundingClientRect()
          let x = rect.left - 24
          let y = -(window.innerHeight - rect.top - 28)
          el.style.display = ''
          el.style.msTransform = `translate3d(0, ${y}px, 0)`
          el.style.MozTransform = `translate3d(0, ${y}px, 0)`
          el.style.OTransform = `translate3d(0, ${y}px, 0)`
          el.style.webkitTransform = `translate3d(0, ${y}px, 0)`
          el.style.transform = `translate3d(0, ${y}px, 0)`
          let inner = el.getElementsByClassName('hook')[0]
          inner.style.msTransform = `translate3d(${x}px, 0, 0)`
          inner.style.MozTransform = `translate3d(${x}px, 0, 0)`
          inner.style.OTransform = `translate3d(${x}px, 0, 0)`
          inner.style.webkitTransform = `translate3d(${x}px, 0, 0)`
          inner.style.transform = `translate3d(${x}px, 0, 0)`
        }
      }
    },
    enter: function (el, done) {
      /* eslint-disable no-unused-vars */
      let rf = el.offsetHeight
      el.style.msTransform = 'translate3d(0, 0, 0)'
      el.style.MozTransform = 'translate3d(0, 0, 0)'
      el.style.OTransform = 'translate3d(0, 0, 0)'
      el.style.webkitTransform = 'translate3d(0, 0, 0)'
      el.style.transform = 'translate3d(0, 0, 0)'
      let inner = el.getElementsByClassName('hook')[0]
      inner.style.msTransform = 'translate3d(0, 0, 0)'
      inner.style.MozTransform = 'translate3d(0, 0, 0)'
      inner.style.OTransform = 'translate3d(0, 0, 0)'
      inner.style.webkitTransform = 'translate3d(0, 0, 0)'
      inner.style.transform = 'translate3d(0, 0, 0)'
      setTimeout(() => {
        done()
      }, 400)
    },
    afterEnter: function (el) {
      let ball = this.dropBalls.shift()
      if (ball) {
        ball.show = false
        el.style.display = 'none'
      }
    }
  }
}
</script>
<style scoped lang="stylus">
.shopcart
  position fixed
  left 0
  bottom 0
  width 100%
  z-index 20
  .content
    display: flex
    background #141d27
    height .96rem
    font-size 0
    .left
      flex 1
      color #979a9c
      .logo-wapper
        display inline-block
        position relative
        top -.2rem
        width 1.12rem
        height 1.12rem
        margin 0 .24rem
        padding .12rem
        border-radius 50%
        box-sizing border-box
        vertical-align top
        background #141d27
        @media only screen and (max-width 320px)
          margin 0
        .logo
          width 100%
          height 100%
          border-radius 50%
          background #2b343c
          text-align center
          &.highlight
            background rgb(0, 160, 220)
            color #fff
          .icon-shopping_cart
            font-size .48rem
            line-height .84rem
            padding-left .06rem
        .count
          position absolute
          top 0
          right -0.08rem
          width .48rem
          height .28rem
          line-height .28rem
          font-size .18rem
          font-weight 700
          border-radius .32rem
          text-align center
          padding .04rem 0
          color #fff
          background rgb(240, 20, 20)
          box-shadow 0 .08rem .16rem 0 rgba(0, 0, 0, .4)
      .price
        display inline-block
        vertical-align top
        margin-top .24rem
        line-height .48rem
        padding-right .24rem
        box-sizing border-box
        font-size .32rem
        font-weight 700
        &.highlight
          color #fff
        &.border-right
          border-right .02rem solid #2b343c
        @media only screen and (max-width 320px)
          margin-left 0
          padding-right .1rem
      .desc
        display inline-block
        line-height .48rem
        font-size .2rem
        margin .24rem 0 0 .24rem
        vertical-align top
        @media only screen and (max-width 320px)
          font-size .16rem
          margin .24rem 0 0 .1rem
    .right
      flex 0 0 2.1rem
      width 2.1rem
      background #2b333b
      .pay
        color #979a9c
        font-size .24rem
        font-weight 700
        line-height .96rem
        text-align center
        &.no-enough
          background #2b333b
        &.payenough
          background #00b43c
          color #fff
  .ball-container
    .ball
      position fixed
      left .64rem
      bottom .44rem
      z-index 200
      .inner
        width .2rem
        height .2rem
        border-radius 50%
        background-color rgb(0, 160, 220)
      &.drop-enter-active
        transition all .4s cubic-bezier(.31,-0.47,.83,.67)
        .inner
          transition all .4s linear
  .shadow
    position fixed
    top 0
    left 0
    width 100%
    height 100%
    z-index -5
    background-color rgba(7, 17, 27, 0.6)
    backdrop-filter blur(10px)
</style>
